<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="D:\education\xc-vue/plugins/normalize-css/normalize.css" />
        <link rel="stylesheet" href="http://www.xuechengzlz.com/plugins/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="http://www.xuechengzlz.com/css/page-learing-index.css" />
        <link rel="stylesheet" href="http://www.xuechengzlz.com/css/page-header.css" />
    </head>
    <body>
        <H1>轮播图</H1>
        <div class="banner-roll">
            <div class="banner-item">
                <#if model??>

                    <#list model as item>
                        <div class="item" style="background-image: url(${item.value});"></div>
                    </#list>
                </#if>
            </div>
            <div class="indicators"></div>
        </div>
        <script type="text/javascript" src="http://www.xuechengzlz.com/plugins/jquery/dist/jquery.js"></script>
        <script type="text/javascript" src="http://www.xuechengzlz.com/plugins/bootstrap/dist/js/bootstrap.js"></script>
        <script type="text/javascript">
            var tg = $(".banner-roll .banner-item .item")
            var num = 0;
            for (i = 0; i < tg.length; i++) {
                $('.indicators').append('<span></span>');
                $('.indicators').find('span').eq(num).addClass('active');
            }

            function roll() {
                tg.eq(num).animate({
                    'opacity': '1',
                    'z-index': num
                }, 1000).siblings().animate({
                    'opacity': '0',
                    'z-index': 0
                }, 1000);
                $('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
                if (num >= tg.length - 1) {
                    num = 0;
                } else {
                    num++;
                }
            }
            $('.indicators').find('span').click(function() {
                num = $(this).index();
                roll();
            });
            var timer = setInterval(roll, 3000);
            $('.banner-item').mouseover(function() {
                clearInterval(timer)
            });
            $('.banner-item').mouseout(function() {
                timer = setInterval(roll, 3000)
            });
        </script>
    </body>
</html>